<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps({
    categories: {
        type: Array,
        required: true
    }
})
console.log(props.categories)
</script>

<template>
  <div class="category-container">
    <div class="title">分类</div>
    <ul class="category-list">
        <li class="cate-item" v-for="(category, index) in categories" :key="index">
            <i class="icon">
                <img :src="category[0].category1[0].imageUrl" alt="">
            </i>
            <template v-for="(item, index) in category[0].category1" :key="index">
                <a href="#">{{ item.name }}</a>
                <span v-if="index !== category[0].category1.length - 1">/</span>
            </template>
            <div class="sub-cate">
                <div class="sub-cate-item" v-for="(item, index) in category[0].category2" :key="index">
                    <div class="label">
                        <a href="#">{{ item[index].name }}</a>
                    </div>
                    <div class="nodes">
                        <a href="#" v-for="(subItem, subIndex) in item[index].children" :key="subIndex">{{ subItem.name }}</a>
                    </div>
                </div>                
            </div>
        </li>
        <!-- <li class="cate-item">
            <i class="iconfont icon-gongyepin"></i>
            <a href="#">工业品</a>
            <span>/</span>
            <a href="#">商业</a>
            <span>/</span>
            <a href="#">定制</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-shouji"></i>
            <a href="#">家电</a>
            <span>/</span>
            <a href="#">手机</a>
            <span>/</span>
            <a href="#">数码</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-shafa"></i>
            <a href="#">家具</a>
            <span>/</span>
            <a href="#">家装</a>
            <span>/</span>
            <a href="#">家居</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-yifu"></i>
            <a href="#">女装</a>
            <span>/</span>
            <a href="#">男装</a>
            <span>/</span>
            <a href="#">内衣</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-xiezi1"></i>
            <a href="#">女鞋</a>
            <span>/</span>
            <a href="#">男鞋</a>
            <span>/</span>
            <a href="#">运动</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-cheliang"></i>
            <a href="#">汽车</a>
            <span>/</span>
            <a href="#">珠宝</a>
            <span>/</span>
            <a href="#">箱包</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-shiwu"></i>
            <a href="#">食品</a>
            <span>/</span>
            <a href="#">生鲜</a>
            <span>/</span>
            <a href="#">健康</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-muyingshipin"></i>
            <a href="#">母婴</a>
            <span>/</span>
            <a href="#">童装</a>
            <span>/</span>
            <a href="#">潮玩</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-meizhuang"></i>
            <a href="#">美妆</a>
            <span>/</span>
            <a href="#">洗护</a>
            <span>/</span>
            <a href="#">宠物</a>
            <div class="sub-cate"></div>
        </li>
        <li class="cate-item">
            <i class="iconfont icon-yule"></i>
            <a href="#">娱乐</a>
            <span>/</span>
            <a href="#">图书</a>
            <span>/</span>
            <a href="#">鲜花</a>
            <div class="sub-cate"></div>
        </li> -->
    </ul>
  </div>
</template>

<style lang="less" scoped>
.category-container {
    border-radius: 10px;
    position: relative;
    min-height: 369px;
    background-color: #F3F6F8;
    color: #666;
    a {
        color: #666;
    }
    .title {
        height: 40px;
        line-height: 40px;
        padding: 8px 16px 0 16px;
        font-weight: bold;
        font-size: @large-font-size;
    }
    .category-list {
        padding: 0 8px 16px 8px;
        .cate-item {
            font-size: 12px;
            padding: 0 8px;
            height: 32px;
            line-height: 32px;
            border-radius: 5px;
        }
        span {
            margin: 0 10px;
        }
        i {
            display: inline-block;
            margin-right: 10px;
            img {
                width: 16px;
                height: 16px;
                vertical-align: middle;
            }
        }
    }
}

.cate-item:hover .sub-cate {
    display: block;
}

.sub-cate {
    display: none;
    box-sizing: border-box;
    position: absolute;
    top: 1px;
    left: 98%;
    width: 700px;
    height: 100%;
    border-radius: 10px;
    padding: 10px;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: solid @primary-color 2px;
    /* overflow: hidden; */
    /* transition: height 0.3s; */
    .sub-cate-item {
        font-size: 16px;
        display: flex;
        flex-shrink: 0;
        .label {
            width: 120px;
            margin-right: 10px;
        }
        .nodes {
            max-width: 500px;
            display: flex;
            flex-grow: 1;
            flex-wrap: wrap;
        }
        .nodes a {
            margin-right: 10px;
        }
    }
}

.cate-item:hover {
    background-color: #fff;
}

@media screen and (max-width: 1399px) and (min-width: 1240px) {

}

@media screen and (max-width: 1239px) {
    .category-container {
        display: none;
    }
}
</style>
